
<template>
  <div class="bg-video">

    <div class="video-title">
      <span>{{ video.title }}</span>
    </div>

    <!-- 播放页面 -->
    <div class="video-msg">
      <el-popover placement="right" width="400" trigger="click">
        <el-form label-position="left"  class="demo-table-expand">
          <el-form-item>
            <span>{{ video.videoUrl }}</span>
          </el-form-item>
        </el-form>
        <el-button slot="reference" type="primary" icon="el-icon-info" size="mini"></el-button>
      </el-popover>
    </div>

    <div>
      <video class="video" :src="video.videoUrl" controls  autoplay></video>
    </div>

  </div>

</template>

<script>
import videoApi from '@/api/video'

export default {

  data() {
    return {
      videoId: '',
      video: {
        id: '',
        title: '',
        videoUrl: '',
        videoSourceId: '',
        videoCover: '',
        sort: 0,
        playCount: 0
      },
      playCount: 0
    }
  },

  created() {
    if (this.$route.params && this.$route.params.id) {
      this.videoId = this.$route.params.id
    }
    //this.getVideoInfoById()
  },

  mounted() {
    this.getVideoInfoById()
    this.addAndGetNewPlayCount()
  },

  methods: {

    getVideoInfoById() {
      videoApi.getVideoInfoById(this.videoId)
        .then(response => {
          this.video = response.data.data.video
        })
    },

    //增加获取并当前浏览数
    addAndGetNewPlayCount() {
      console.log("=====播放数====")
      videoApi.getPlayCountOrAddPlayCountById(this.videoId,0)
        .then(response => {
          if (response.data.success === true) {
            this.playCount = response.data.data.video.playCount
            this.playCount = this.playCount + 1
            videoApi.addRecord()
            videoApi.getPlayCountOrAddPlayCountById(this.videoId,1)
            this.$message({
              message: "您是该视频第" + this.playCount + "位播放者",
              type: "success"
            })
          }
        })
    }
  }
}
</script>
<style>
.bg-video {
  background: #68CB9B;
  text-align: center;
}
.video-title {
  font-size:26px;
  padding-top: 1%;
}
.video-msg {
  padding-top: 1%;
  padding-left: 38%;
}
.video {
  padding-bottom: 5%;
  width: 40%;
  height: 30%;
  display: inline-block;
}
</style>
